<template>
	<el-dialog class="dataSpread-dialog" :visible.sync="themeEditVisible" top="15vh" 
		:title="editName" :close-on-click-modal="false"
		:close-on-press-escape="false" width="650px" @close="closeFn">
		<el-form class="form" :model="rechargeTemplateDataForm" :rules="dataRule" ref="themeEditForm" label-width="120px" size="medium" :inline="false"
			labelSuffix="：">
			<el-form-item prop="sub" label="设置角标">
				<el-select v-model="rechargeTemplateDataForm.sub" placeholder="设置角标">
					<el-option v-for="(item,index) in subArr" :key="index" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item v-if="rechargeTemplateDataForm.sub==1" prop="subText" label="角标自定义文本">
				<el-input clearable v-model="rechargeTemplateDataForm.subText" placeholder="角标自定义文本" />
			</el-form-item>
			<el-form-item prop="skin" label="设置皮肤">
				<el-select clearable v-model="rechargeTemplateDataForm.skin" placeholder="设置皮肤">
					<el-option v-for="(item,index) in skinArr" :key="index" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-form-item>
			
		</el-form>
		<template slot="footer">
			<el-button @click="themeEditVisible = false">{{ $t('views.public.cancel') }}</el-button>
			<el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('views.public.confirm') }}</el-button>
		</template>
	</el-dialog>
</template>

<script>
	import {
		debounce
	} from 'lodash'
	import {
		isEmail,
		isMobile
	} from '@/libs/validate'
	import schema from 'async-validator'
	export default {
		data() {
			return {
				editName:'',
				typeArr:[],
				subArr:[{
					label:'不设置角标',
					value:0
				},
				{
					label:'自定义文本',
					value:1
				}],
				skinArr:[{
					label:'红',
					value:1
				},
				{
					label:'黄',
					value:2
				},
				{
					label:'黑',
					value:3
				}],
				templeteListLoading:false,
				dataId:null,
				themeEditVisible: false,
				deptList: {},
				noPlaylet: false,//是否显示没有短剧
				roleIdListDefault: [],
				rechargeTemplateDataForm: {
					type:'',
					sub:1,
					subText:'',
					skin:''
				}
			}
		},
		created() {},
		computed: {
			dataRule() {
				return {
				}
			}
		},
		watch:{
		},
		methods: {
			closeFn(){
				this.$refs.themeEditForm.resetFields();
			},
			init(row) {
				this.themeEditVisible = true;
				this.editName = row.name;
				this.rechargeTemplateDataForm.type;
				let aa = [];
				if(Array.isArray(row.convention)){
					row.convention.forEach((item, index) => {
						aa.push({
							label:item.name,
							value:item.value
						})
					})
				}
				if(Array.isArray(row.member)){
					row.member.forEach((item, index) => {
						if(item.status){
							aa.push({
								label:item.name,
								value:item.value
							})
						}
					})
				}
				if(Array.isArray(row.promotion)){
					row.promotion.forEach((item, index) => {
						if(item.status){
							aa.push({
								label:item.name,
								value:item.value
							})
						}
					})
				}
				console.log(aa);
				this.typeArr = aa;
				
				this.$nextTick(() => {
					// this.$refs.themeEditForm.resetFields();
				})
			},
			// 表单提交
			dataFormSubmitHandle: debounce(function() {
				console.log('表单提交');
				this.$refs.themeEditForm.validate((valid) => {
					console.log(valid + '--+++++-----------')
					if (!valid) {
						return false
					}
					console.log(this.themeEditForm);
					this.$axios.post(this.dataId?`/api/playlet/dataSpread/update/${this.dataId}`:'/api/playlet/dataSpread/create', this.rechargeTemplateDataForm).then(res => {
						this.$message({
							message: this.$t('views.public.success'),
							type: 'success',
							duration: 500,
							onClose: () => {
								this.themeEditVisible = false;
								this.$emit('refreshDataList');
							}
						})
					}).catch(() => {})
				})
			}, 1000, {
				leading: true,
				trailing: false
			})
		}
	}
</script>

<style lang="scss" scoped>
	.form{
		width: 570px;
	}
</style>